<template>
  <div style="padding-left: 100px;">
    <input ref="titleInput" autocomplete="off" placeholder="无标题" class="titleInput"/>
    <div contenteditable ref="container">
      <InputExtend/>
    </div>
  </div>
</template>

<script setup>
import {createApp, h, onMounted, ref, watch} from 'vue'
import InputExtend from './InputExtend.vue'

const titleInput = ref(null);
const container = ref(null)
onMounted(()=>{
  titleInput.value.focus()
  container.value.addEventListener('input', ()=>{
    // console.log(container.value.innerText)
    if (container.value.innerText.includes('\n')) {
      for (let i = 0; i < container.value.childNodes.length; i++) {
        let child = container.value.childNodes[i]
        if(child.childNodes.length !== 1){
          console.log(child)
          for (let j = 0; j < child.childNodes.length; j++) {
            let child_ = child.childNodes[j]
            newInput(false, child_.innerHTML==='<br>'?'':child_.innerText ,child)
          }
          container.value.removeChild(child)
          break
        }
      }
    }
  })
})
function newInput(focus, init, old){
  addInputExtend(container.value)
  function addInputExtend(containerElement) {
    const inputExtend = createInputExtendComponent();
    // containerElement.appendChild(inputExtend.$el);
    containerElement.insertBefore(inputExtend.$el, old);
    function createInputExtendComponent() {
      const InputExtendComponent = {
        render() {
          return h(InputExtend, {
            enter: focus,
            init: init
          });
        }
      };
      return createApp(InputExtendComponent).mount(document.createElement('div'));
    }
  }
}
</script>

<style lang="scss" scoped>
.titleInput{
  box-sizing: border-box;
  border: none;
  display:block;
  outline:0;
  width:100%;
  font-size: 22.5pt;
  font-weight: 700;
  color: #1f1f1f;
  height: 50px;
  padding: 0;
}
</style>
